<template>
  <div class="searchs">
    <div class="search-box-wrapper">
      <search-box ref="searchBox" @query="onQueryChange"></search-box>
    </div>
    <div class="shortcut-wrapper" v-show="!query" ref="shortcutWrapper">
      <div class="shortcut" ref="shortcut">
        <div class="fff">
          <div class="hot-key">
            <h1 class="title">热门搜索</h1>
            <ul>
              <li v-for="item in hotKey" :key="item.first" class="item" @click="addQuery(item)">
                <span>{{ item.first }}</span>
              </li>
            </ul>
          </div>
          <div class="search-history" v-show="searchHistory.length">
            <h1 class="title">
              <span class="text">搜索历史</span>
              <span class="clear" @click="showConfirm">
                <i class="iconfont iconlajitong"></i>
              </span>
            </h1>
            <search-list @select="addQuerys" @delete="deleteOne" :searches="searchHistory"></search-list>
          </div>
        </div>
      </div>
    </div>
    <div class="search-result" v-show="query">
      <suggest :query="query" @select="saveSearch"></suggest>
    </div>
    <confirm ref="confirm" text="是否清空所有搜索历史" @confirm="clearAll"></confirm>
  </div>
</template>

<script type="text/javascript">
import SearchBox from '@/base/search-box/serach-box'
// 获取热门搜索
import { getSearchHot } from '@/api/search'
import { ERR_OK } from '@/common/js/common'
import Suggest from '@/components/suggest/suggest'
import { mapActions, mapGetters } from 'vuex'
import SearchList from '@/base/search-list/search-list'
import Confirm from '@/base/confirm/confirm'
import BScroll from 'better-scroll'
// import { debounce } from '@/common/js/util'

export default {
  created () {
    this._getHotK()
  },
  data () {
    return {
      hotKey: [],
      query: ''
    }
  },
  methods: {
    addQuery (query) {
      // console.log(query)
      this.$refs.searchBox.setQuery(query.first)
    },
    onQueryChange (query) {
      this.query = query
    },
    addQuerys (query) {
      this.$refs.searchBox.setQuery(query)
    },
    deleteOne (item) {
      this.deleteSearchHistory(item)
    },
    clearAll () {
      this.clearSearchHistory()
    },
    _getHotK () {
      getSearchHot().then((res) => {
        if (res.status === ERR_OK) {
          this.hotKey = res.data.result.hots
          console.log(res)
        }
      })
    },
    saveSearch () {
      console.log(666)
      this.saveSearchHistory(this.query)
    },
    showConfirm () {
      this.$refs.confirm.show()
    },
    handlePlaylist (scrol) {
      const bottom = this.currentSong.id ? '60px' : ''
      // console.log(this.currentSong.id)
      this.$refs.shortcutWrapper.style.bottom = bottom
      scrol.refresh()
    },
    ...mapActions([
      'saveSearchHistory',
      'deleteSearchHistory',
      'clearSearchHistory'
    ])
  },
  computed: {
    shortcut () {
      return this.hotKey.concat(this.searchHistory)
    },
    ...mapGetters([
      'searchHistory',
      'currentSong'
    ])
  },
  mounted () {
    const options = {
      click: true,
      tap: true
    }
    var timerId = setInterval(() => {
      if (this.shortcut) {
        console.log(8888888)
        // console.log(this.data)
        this.scroll = new BScroll(this.$refs.shortcut, options)
        clearInterval(timerId)
        var scrol = this.scroll
        this.handlePlaylist(scrol)
        // console.log(this.scroll)
        // console.log(999)
      }
    }, 200)
  },
  components: {
    SearchBox,
    Suggest,
    SearchList,
    Confirm
  }
}
</script>

<style lang="less" scoped>
@import "~@/common/css/variable";
@import "~@/common/css/mixin";

ul {
  padding: 0;
  margin: 0;
}
.fff {
  /*height: 100%*/
}
.searchs {
  /*left: 0;
  right: 0;
  position: fixed;*/
  width: 100%;
  height: 100%;
  /*top: 0;
  bottom: 0;
  background: @color-background;*/
  .search-box-wrapper {
    height: 50px;
    /*position: fixed;
    width: 100%;
    background: #a51a3f;
    .fa {
      position: absolute;
      left: 5px;
      top: 3px;
      padding: 3px 10px;
      font-size: 30px;
      color: #fff;
    }*/
  }
  .shortcut-wrapper {
    /*height: 100%;*/
    overflow: hidden;
    position: fixed;
    top: 50px;
    bottom: 0;
    width: 100%;
    .shortcut {
      height: 100%;
      overflow: hidden;
      .hot-key {
        margin: 0 20px;
        .title {
          padding: 3px 5px 0 5px;
          height: 30px;
          line-height: 30px;
          font-size: @font-size-small-x;
          color: @color-text-g;
        }
        .item {
          display: inline-block;
          padding: 5px 10px;
          margin: 0 18px 10px 0;
          border-radius: 6px;
          background: @color-highlight-background;
          font-size: @font-size-medium;
          color: @color-text;
        }
      }
    }
  }
.search-result {
  overflow: hidden;
  position: fixed;
  top: 50px;
  bottom: 0;
  width: 100%;
}
.search-history {
  position: relative;
  margin: 10px 25px;
  .title {
    display: flex;
    align-items: center;
    height: 30px;
    font-size: @font-size-small-x;
    color: @color-text-g;
    .text {
      // font-size: 13px;
      flex: 1;
    }
    .clear {
      @include extend-click();
      .icon-clear {
        font-size: @font-size-medium;
        color: @color-text;
      }
    }
  }
}
/*  .search-scroll-wrapper {
    height: 100%;
    overflow: hidden;
    position: relative;
    top: 70px;
    .search-hots {
      margin: 0 20px;
      .title {
        padding: 15px 5px 0 5px;
        height: 30px;
        line-height: 30px;
        font-size: @font-size-small-x;
        color: @color-text-g;
      }
      span {
        display: inline-block;
        padding: 3px 5px;
        margin: 4px 4px;
        border: 0.8px solid @color-text-ggg;
        border-radius: 5px;
        line-height: 20px;
        color: @color-text;
        font-size: @font-size-medium;
      }
    }
    .shortcut-wrapper {
      position: relative;
      // top: 178px
      // bottom: 0
      // width: 90%
      margin: 0 auto;
      .shortcut {
        height: 100%;
        overflow: hidden;
        .hot-key {
          margin: 0 20px 20px 20px;
          .title {
            margin-bottom: 20px;
            font-size: @font-size-medium;
            color: @color-text;
          }
          .item {
            display: inline-block;
            padding: 5px 10px;
            margin: 0 20px 10px 0;
            border-radius: 6px;
            background: @color-highlight-background;
            font-size: @font-size-medium;
            color: @color-text;
          }
        }
      }
      .search-history {
        position: relative;
        margin: 10px 25px;
        .title {
          display: flex;
          align-items: center;
          height: 30px;
          font-size: @font-size-small-x;
          color: @color-text-g;
          .text {
            // font-size: 13px;
            flex: 1;
          }
          .clear {
            @include extend-click();
            .icon-clear {
              font-size: @font-size-medium;
              color: @color-text;
            }
          }
        }
      }
    }
  }*/
}
/*.search-result {
  position: relative;
  height: 100%;
  top: 65px;
  bottom: 0;
}
.router-view {
  z-index: 1000;
}*/
</style>
